<style lang="scss" scoped>
	.my-top {
		width: 750rpx;
		height: 500rpx;
		overflow: hidden;
		background: linear-gradient(to left, #dfeaff, #d1ebff);

		.my-header {
			width: 710rpx;
			height: 100rpx;
			margin: 150rpx auto 0rpx;
			display: flex;
			justify-content: start;

			.my-imgs {
				width: 80rpx;
				height: 80rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50rpx;
					margin: 10rpx 10rpx 0rpx 10rpx;
				}
			}

			.my-user {
				margin-left: 30rpx;

				.usertel {
					font-weight: 600;
					color: #333;
				}

				.tishi {
					font-size: 28rpx;
					color: #79797a;
				}
			}

		}

		.mybtn {
			display: block;
			margin-right: 20rpx;
		}
	}

	.myswiper {
		position: fixed;
		top: 300rpx;
		width: 750rpx;
		height: 500rpx;
		// background: pink;
.bg1{
				background: linear-gradient(to right, #3d80ff, #3263fe);
			}
			.bg2{
				background: linear-gradient(to right, #ffba41, #ffbc3f);
			}
			.bg3{
				background: linear-gradient(to right, #b279fa, #b070fc);
			}
			.bg4{
				background: linear-gradient(to right, #332e28, #322c2c);
			}
		.myitem {
			width: 710rpx;
			height: 500rpx;
			margin: 0rpx auto;
			border-radius: 25rpx;
			color: #fff;
			overflow: hidden;
			

			.swiperhd {
				width: 710rpx;
				height: 200rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.hd-left {
					margin: 5rpx 20rpx;
				.mylv {
					font-weight: 600;
					margin: 20rpx 0rpx;
				}	
				}
				.hd-right {
					width: 200rpx;
					height: 200rpx;
					image {
						width: 200rpx;
						height: 200rpx;
					}
				}
			}
			.swiperbd {
				width: 705rpx;
				height: 295rpx;
				margin: 0rpx auto;
				border-radius: 20rpx;
				background: #fff;
				color: #333;
				.bd-title {
					padding: 20rpx;
				}
				.bd-box {
					display: flex;
					justify-content: start;
					align-items: center;
					.box-item {
						font-size: 28rpx;
						padding: 10rpx 20rpx;
						border-radius: 30rpx;
						font-size: 20rpx	;
						border: 1px solid #f6f6f6;
						margin: 0rpx 15rpx;
						&:nth-child(1){
							background: #f1f6ff;
						}
					}
				}
			.iconsitem {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 700rpx;
				height: 100rpx;
				.isitem {
					width: 175rpx;
					height: 100rpx;
					display: flex;
					justify-content: space-evenly;
					.imgs {
						width: 115rpx;
						height: 100rpx;
						margin: 0rpx 30rpx;
					}
				}
				.txorder {
					font-size: 25rpx;
					color: #ccc;
					text-align: center;
				}
			}	
			}
			
		}

	}
	
	.card {
		width: 710rpx;
		margin: 320rpx auto;
		height: 120rpx;
		border: 1rpx solid #ccc;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		.card-left {
			display: flex;
			height: 120rpx;
			line-height: 120rpx;
		}
		image {
			width: 80rpx;
			height: 80rpx;
			margin: 10rpx 20rpx;
			border-radius: 20rpx;
		}
		.card-right {
			display: flex;
			height: 120rpx;
			margin-right: 40rpx;
			line-height: 120rpx;
		view {
			display: flex;
		}
		}
	}
</style>
<template>
	<view class="my-top">
		<view class="my-header">
			<view class="my-imgs">
				<image src="/static/imgs/user.jpg" mode=""></image>
			</view>
			<view class="my-user">
				<view class="usertel">195******43</view>
				<view class="tishi">我的勋章 4/30</view>
			</view>
			<button class="mybtn">签到</button>
		</view>
	</view>
	<swiper class="myswiper">
		<swiper-item class="myswiperitem" v-for="(item,index) in myswiper">
			<div class="myitem" :class="item.bgc" >
				<view class="swiperhd">
					<view class="hd-left">
						<view class="mylv">微雪花</view>
						<view>您已经超越等级~</view>
					</view>
					<view class="hd-right">
						<image :src="item.imgs" mode=""></image>
					</view>
				</view>
				<view class="swiperbd">
					<view class="bd-title">微雪花尊享会员 &gt;</view>
					<view class="bd-box">
						<view class="box-item">每日礼</view>
					<view class="box-item">每日礼</view>
					<view class="box-item">每日礼</view>
					</view>
					<view class="iconsitem">
						<view class="isitem">
							<view>
								<image class="imgs" src="/static/imgs/ins1.jpg" mode=""></image>
								<view class="txorder">周二折现日</view>
							</view>
							<view>
								<image class="imgs" src="/static/imgs/ins2.jpg" mode=""></image>
								<view class="txorder">周二折现日</view>
							</view>
							<view>
								<image class="imgs" src="/static/imgs/ins3.jpg" mode=""></image>
								<view class="txorder">周二折现日</view>
							</view>
							<view>
								<image class="imgs" src="/static/imgs/ins4.jpg" mode=""></image>
								<view class="txorder">周二折现日</view>
							</view>
						</view>
					</view>
				</view>
			</div>
		</swiper-item>
	</swiper>
	
	<view class="card">
		<div class="card-left">
			<image src="../../static/imgs/user.jpg" mode=""></image>
			<view>蜜雪冰城APP</view>
		</div>
		<div class="card-right">
		<view>下载APP体验 <i class="iconfont icon-gengduo2"></i> </view>
		</div>
	</view>
</template>	

<script setup>
import { getmyswiper, } from '../../api/deta';
import {ref} from 'vue'
const myswiper = ref([])
const render = async()=>{
	await getmyswiper().then((res)=>{
		myswiper.value =res.data
	})
}
render()
 </script>